﻿<UserControl x:Class="SD.Samples.Views.LoadingIndicator" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="70" Height="70">
    
    <UserControl.Resources>
        <RadialGradientBrush x:Key="MainBrush">
            <GradientStop Color="Transparent" Offset="1"/>
            <GradientStop Color="#3368CFFB" Offset="0.692"/>
            <GradientStop Color="#5568CFFB" Offset="0.54"/>
            <GradientStop Color="#FF68CFFB" Offset="0"/>
        </RadialGradientBrush>

        <Style TargetType="Ellipse" x:Key="CircleStyle">
            <Setter Property="Fill" Value="{StaticResource MainBrush}" />
            <Setter Property="Width" Value="16" />
            <Setter Property="Height" Value="16" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        </Style>
        
        <Storyboard x:Name="RotatingStoryboard" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse2">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.75" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse2">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.75" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse3">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse3">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse4">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.25" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse4">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.25" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse5">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse5">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse6">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.25" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.75" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse6">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.25" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.75" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse7">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse7">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Ellipse8">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.75" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5.25" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Ellipse8">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.75" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2.25" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.75" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5.25" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <Grid>
            <TextBlock x:Name="TextBlock" Margin="15" HorizontalAlignment="Center" VerticalAlignment="Center"
                TextWrapping="Wrap" 
                TextAlignment="Center" />

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle1">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="90"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse1" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle2">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="135"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse2" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle3">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="180"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse3" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle4">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="225"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse4" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle5">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="270"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse5" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle6">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="315"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse6" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle7">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="0"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse7" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="Circle8">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="45"/>
                </Grid.RenderTransform>
                <Ellipse x:Name="Ellipse8" Style="{StaticResource CircleStyle}">
                    <Ellipse.RenderTransform>
                        <CompositeTransform/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>
        </Grid>
    </Grid>
</UserControl>
